<template>
  <div>
    <el-radio-group v-model="radio">
      <el-radio :label="0">审核中</el-radio>
      <el-radio :label="1">审核已通过</el-radio>
      <el-radio :label="2">审核未通过</el-radio>
    </el-radio-group>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="贴子内容 : ">
              <span>{{ props.row.content }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.imgsUrl" label="图片 : ">
              <el-image style="width: 100px; height: 100px" :src="props.row.imgsUrl" fit="fill">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item>
              <el-button type="text" @click="deleteActive(props.row)">删除此帖子</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="标签"
        prop="type">
      </el-table-column>
      <el-table-column
        label="发帖人"
        prop="nickName">
      </el-table-column>
      <el-table-column
        label="发帖位置"
        prop="postLocation">
      </el-table-column>
      <el-table-column label="是否匿名">
        <template slot-scope="scope">
          {{scope.row.isAnonymous===1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column
        label="学校"
        prop="schoolName">
      </el-table-column>
      <el-table-column
        label="发帖时间"
        prop="releaseTime">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="examine(scope.$index, scope.row,1)">通过</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="examine(scope.$index, scope.row,2)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        tableData: [],
        radio: 0
      }
    },
    watch:{
      radio:{
        handler(){
          this.loadActive()
        }
      }
    },

    mounted() {
      const that = this;
      this.$axios.get('/user/user', {
          params: {
            id: that.user.id
          }
        }).then(function (response) {
          that.user = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.loadActive()
    },

    methods: {
      loadActive(){
        const that = this;
        this.$axios.get('/manageActive/loadList',{
          params: {
            isExamine: that.radio
          }
        }).then(function (res) {
          that.tableData = res.data.data
        }).catch(function (error) {
          console.log(error);
        });
      },
      examine(index,row,flag){
        const that = this
        this.$axios.post('/manageActive/updateActive',{
          id: row.id,
          isExamine: flag
        }).then(function (res) {
          if (res.data.code === '200'){
            that.$message({
              type:'success',
              message:'成功'
            })
            that.loadActive()
          }
        })
      },
      deleteActive(row){
        const that = this;
        this.$axios.get('/manageActive/deleteActive',{
          params: {
            id: row.id
          }
        }).then(function (res) {
          if (res.data.code === '200'){
            that.$message({
              type:'success',
              message:'成功'
            })
            that.loadActive()
          }
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }

</script>

<style scoped>
.demo-table-expand {
  padding-left: 40px;
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
